<template>
  <view>
    <view class="study_top">
      <view
        class="nav_view"
        v-for="(item, index) in navList"
        :key="index"
        @click="recordClick(item.option)"
      >
        <image class="nav_img" :src="item.src1" mode=""></image>
        <image class="nav_img nav_img_center" :src="item.src2" mode=""></image>
        <text class="text" :class="{ on: options === item.option }">{{
          item.label
        }}</text>
      </view>
    </view>

    <!-- 使用v-if来替代动态组件 -->
    <my-video v-if="comName === 'myVideo'" ref="mVideo"></my-video>
    <my-test v-else-if="comName === 'myTest'"></my-test>
    <my-study v-else-if="comName === 'myStudy'"></my-study>
  </view>
</template>

<script>
import myVideo from "../../dgs_hg/onLineStudy/myVideo.vue";
import myTest from "../../dgs_hg/onLineStudy/myTest.vue";
import myStudy from "../../dgs_hg/onLineStudy/myStudy.vue";

export default {
  components: {
    myVideo,
    myTest,
    myStudy,
  },
  data() {
    return {
      options: "myVideo",
      comName: "myVideo",
      navList: [
        {
          src1: "/static/study/study1.png",
          src2: "/static/study/stext1.png",
          label: "我的视频",
          option: "myVideo",
        },
        {
          src1: "/static/study/study2.png",
          src2: "/static/study/stext2.png",
          label: "我的测验",
          option: "myTest",
        },
        {
          src1: "/static/study/study3.png",
          src2: "/static/study/stext3.png",
          label: "学习记录",
          option: "myStudy",
        },
      ],
    };
  },
  onLoad() {},
  onShow() {
    if (this.$refs.mVideo && typeof this.$refs.mVideo.search === "function") {
      this.$refs.mVideo.search();
    }
  },
  methods: {
    recordClick(item) {
      this.options = item;
      this.comName = item;
    },
  },
};
</script>

<style lang="scss" scoped>
.study_top {
  background-color: white;
  border-radius: 20px;
  box-shadow: 4px 6px 10px #f3f2fb;
  padding: 10px 0;
  margin: 0 15px 15px 15px;
  display: flex;
  justify-content: space-evenly;

  .nav_view {
    width: 23%;
    text-align: center;
    display: inline-block;
    position: relative;
    margin: 4px 0;

    .nav_img {
      width: 100rpx;
      height: 100rpx;
    }

    .nav_img_center {
      position: absolute;
      top: 14%;
      left: 50%;
      width: 70rpx;
      height: 60rpx;
      transform: translate(-50%, 0);
    }

    .text {
      display: block;
      text-align: center;
      font-size: 14px;

      &.on {
        color: #ffbc00;
      }
    }
  }
}
</style>
